<template>
  <div id="app">
    <!-- <van-contact-card type="edit" name="张三" tel="13000000000" :editable="false" />
    <van-contact-card type="edit" name="张三" tel="13000000000" :editable="false" />-->
    <!-- 联系人卡片 -->
    <!-- <van-contact-card
      :type="cardType"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showList = true"
    />-->
    <van-contact-list
      v-model="chosenContactId"
      :list="list"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    />
    <!-- 联系人列表 -->
    <van-popup v-model="showList" position="bottom"></van-popup>

    <!-- 联系人编辑 -->
    <van-popup v-model="showEdit" position="bottom">
      <van-contact-edit
        :contact-info="editingContact"
        :is-edit="isEdit"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
Vue.prototype.$ajax = axios;
import { ContactCard, ContactList, ContactEdit, Toast } from "vant";

Vue.use(ContactCard);
Vue.use(ContactList);
Vue.use(ContactEdit);
Vue.use(Toast);

export default {
  name: "app",
  components: {},
  data() {
    return {
      chosenContactId: null,
      editingContact: {}, // 正在编辑的联系人数据
      showList: false,
      showEdit: false, // 编辑弹窗的显隐
      isEdit: false, // 新建还是编辑？ 新建:表单就是空的，编辑：数据正常的. 默认就是编辑的
      list: [
        {
          id: 1,
          name: "不是来自后端数据",
          tel: "111111"
        }
      ],
      instance: null //axios实例
    };
  },
  computed: {
    cardType() {
      return this.chosenContactId !== null ? "edit" : "add";
    },

    currentContact() {
      const id = this.chosenContactId;
      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
    }
  },
  created() {

    this.getList()
    // axios.get('/contactList').then(res=>{
    //     console.info(res)
    // })
  },
  methods: {

    // 获取服务器数据
    getList(){
    this.instance = axios.create({
      baseURL: "http://192.168.0.108:9000/api",
      timeout: 1000
    });

    this.instance
      .get("/contactList")
      .then(res => {
        this.list = res.data.data;
      })
      .catch(err => {
        console.error(err);
        Toast("服务请求失败");
      });
    },

    // 添加联系人
    onAdd() {
      this.editingContact = { id: this.list.length };
      this.isEdit = false;
      this.showEdit = true;
    },

    // 编辑联系人
    onEdit(item) {
      this.isEdit = true;
      this.showEdit = true;
      this.editingContact = item;
    },
    // 选中联系人
    onSelect() {
      this.showList = false;
    },
    // 保存联系人
    onSave(info) {
      this.showEdit = false;
      this.showList = false;

      if (this.isEdit) {
        // 修改
        // this.list = this.list.map(item => (item.id === info.id ? info : item));
        this.instance.put('/contact/edit',info).then(res=>{
          if(res.data.code==200){
            Toast("编辑成功")
            this.showEdit=false
            this.getList()
          }
        }).catch(err=>{
          console.error(err)
          Toast("编辑失败")
        })



      } else {
        // 新建
        // this.list.push(info);
        this.instance
          .post("/contact/new/json", info)
          .then(res => {
            console.info(res);
            Toast("新建成功");
            this.getList()
          })
          .catch(err => {
            console.error(err);
            Toast("保存失败，服务器失联");
          });
      }
      this.chosenContactId = info.id;
    },
    // 删除联系人
    onDelete(info) {
      this.showEdit = false;
      // this.list = this.list.filter(item => item.id !== info.id);
      // if (this.chosenContactId === info.id) {
        // this.chosenContactId = null;
      // }

      this.instance.delete('/contact',{
        params:{
          id:info.id
        }
      }).then(res=>{
        if(res.data.code==200){
          Toast(res.data.message)
          console.info(res)
          this.getList()
        }
      }).catch(err=>{
        console.error(err)
        Toast("删除失败")
      })
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
